<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!-- 取出部署的应用程序名或者是当前的项目名称 -->
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>书籍详情</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
</head>

<body>
    <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>

    <div id="left">
        <%@include file="/WEB-INF/jsp/common/component/userMessage.jsp"%>
        <%@include file="/WEB-INF/jsp/common/component/menu.jsp"%>
    </div><!-- /#left -->

    <div id="wrap">
        <div class="content" >
            <div class="inner">
                <form id="createForm" class="form-horizontal" role="form" >
                    <div class="form-group">                                                                               <!--页头-->
                        <div class="col-sm-12 ">
                            <div class="page-header">
                                <h1>书籍详情</h1>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">封面</span>
                        <img src='/images/@l${book.cover}' alt="暂无图片" style="padding-left: 15px">
                    </div>
                    <br/>

                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">书名</span>
                        <span class="col-sm-4 display" id="name">${book.name}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">ISBN</span>
                        <span class="col-sm-4 display" id="isbn">${book.isbn}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">作者</span>
                        <span class="col-sm-4 display" id="author">${book.author}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">语言</span>
                        <span class="col-sm-4 display" id="language">${book.bookLanguage.name}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">出版社</span>
                        <span class="col-sm-4 display" id="publishingHouse">${book.publishingHouse}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">出版年份</span>
                        <span class="col-sm-4 display" id="publicationYear">${book.publicationYear}</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">价格</span>
                        <span class="col-sm-4 display" id="price" >${book.price} 元</span>
                    </div>
                    <br/>
                    <div class="form-group">                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">状态</span>
                        <span class="col-sm-4 display" id="status" >${book.status}</span>
                    </div>
                    <br/>
                    <div class="form-group" >                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">备注</span>
                        <p class="col-sm-8 display">
                            ${book.remark}
                        </p>
                    </div>
                    <br/>

                    <div class="form-group" >                                                                             <!--书名-->
                        <span class="col-sm-3 text-right display">展示图片</span>
                        <div class="col-sm-5">
                            <div id="myCarousel" class="carousel slide" >
                                <!-- 轮播（Carousel）指标 -->
                                <ol class="carousel-indicators">
                                    <c:forEach items="${book.imageList}" varStatus="vs">
                                        <li data-target="#myCarousel" data-slide-to="${vs.index}"></li>
                                    </c:forEach>
                                </ol>
                                <!-- 轮播（Carousel）项目 -->
                                <div class="carousel-inner">
                                    <c:forEach items="${book.imageList}" var="v">
                                        <div class="item">
                                            <img src='/images/@l${v}' width="100%" alt="暂无图片">
                                        </div>
                                    </c:forEach>
                                    <c:if test="${book.imageList==null}">
                                        <div class="item" >
                                            <img width="100%" alt="暂无图片">
                                        </div>
                                    </c:if>
                                </div>
                                <!-- 轮播（Carousel）导航 -->
                                <a class="carousel-control left" href="#myCarousel"
                                   data-slide="prev">&lsaquo;</a>
                                <a class="carousel-control right" href="#myCarousel"
                                   data-slide="next">&rsaquo;</a>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <br/>

                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-3">
                            <c:if test="${book.owner.id == userId}">
                                <a href="${ctx}/book/update?id=${book.id}" type="button" class="btn btn-info btn-lg">更新</a>
                            </c:if>
                            <button type="button" class="btn btn-info btn-lg col-sm-offset-3" onclick="window.history.back()">返回</button>
                        </div>
                    </div>

                </form>
            </div>
        </div><!-- /#content -->
        <%@include file="/WEB-INF/jsp/common/component/footer.jsp"%>
    </div><!-- /#wrap -->
    <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

    <script>
        $(document).ready(function(){
            $("#status").text(book_status[$("#status").text()]);
            $("li[data-slide-to='0']").addClass("active");
            $("div[class='item']").first().addClass("active");

            $("#myCarousel").carousel({
                interval: 3000
            });

        });
    </script>
</body>

</html>

